<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="品种名称：">
                  <el-input v-model="from.commodityName" placeholder="请输入品种名称" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="品种编号：">
                  <el-input v-model="from.commodityNo" placeholder="请输入品种编号" clearable class="selWidth" />
                </el-form-item>
                <el-form-item label="交易所：">
                  <el-select v-model="from.exchangeId" placeholder="请选择交易所" clearable class="selWidth">
                    <el-option v-for="item in Joptions" :key="item.id" :label="item.exchangeName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="币种：">
                  <el-select v-model="from.currencyId" placeholder="请选择币种" clearable class="selWidth">
                    <el-option v-for="item in Boptions" :key="item.id" :label="item.currencyName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="from.status" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="正常"></el-option>
                    <el-option :value="2" label="关闭"></el-option>
                    <el-option :value="3" label="锁定"></el-option>
                    <el-option :value="4" label="所有"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" icon="el-icon-search"  type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" icon="el-icon-circle-plus-outline" type="primary" @click="add()">新增</el-button>
          <el-button class="mr10" size="small" icon="el-icon-delete" type="danger" @click="allDel()">删除</el-button>
          <el-button class="mr10" size="small" icon="el-icon-top" @click="exportTable()">导出表格</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="onSelectTab" highlight-current-row>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="commodityName" label="品种名称" min-width="80" />
        <el-table-column prop="commodityNo" label="品种编号" min-width="80" />
        <el-table-column prop="exchangeName" label="交易所" min-width="80" />
        <el-table-column prop="currencyName" label="币种" min-width="80" />

        <!-- <el-table-column prop="commodityType" label="品种类型" min-width="80" /> -->
        <el-table-column prop="commodityType" label="品种类型" min-width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.commodityType == 2">期货</div>
            <div v-if="scope.row.commodityType == 3">期权</div>
            <div v-if="scope.row.commodityType == 4">指数</div>
          </template>
        </el-table-column>


        <el-table-column prop="contractMultiplier" label="合约乘数" min-width="80" />

        <el-table-column prop="lockFlag" label="锁仓" min-width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.lockFlag == 1">锁仓</div>
            <div v-else-if="scope.row.lockFlag == 2">不可锁仓</div>
            <div v-else>不可锁仓</div>
          </template>
        </el-table-column>
        <el-table-column prop="orderFlag" label="委托" min-width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.orderFlag == 1">可委托</div>
            <div v-else-if="scope.row.orderFlag == 2">不可委托</div>
            <div v-else>可委托</div>
          </template>
        </el-table-column>

        <el-table-column prop="commodityTickSize" label="价格变动最小点数" min-width="130" />
        <el-table-column prop="floatValue" label="每点浮动价值" min-width="100" />
        <el-table-column prop="minFee" label="最小手续费" min-width="80" />
        <el-table-column prop="maxFee" label="最大手续费" min-width="80" />
        <el-table-column prop="tradeTime" label="交易时间" min-width="150">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.tradeTime" :key="index">{{ item.beginTime }}-{{ item.endTime }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="80">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.status == 1">正常</el-button>
            <el-button size="mini" v-if="scope.row.status == 2">关闭</el-button>
            <el-button size="mini" v-if="scope.row.status == 3">锁定</el-button>
            <el-button size="mini" v-if="scope.row.status == 4">所有</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100" />
        <el-table-column prop="createTime" label="创建时间" min-width="150" />
        <el-table-column label="操作" min-width="130" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <el-dialog :title="ruleForm.id ? '编辑' : '新增'" :visible.sync="dialogVisible" width="700px"
      :close-on-click-modal="false" :close-on-press-escape="false" top="5vh">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="150px">
        <el-form-item label="品种名称：" prop="commodityName">
          <el-input v-model="ruleForm.commodityName"></el-input>
        </el-form-item>
        <el-form-item label="品种编号：" prop="commodityNo">
          <el-input v-model="ruleForm.commodityNo"></el-input>
        </el-form-item>
        <el-form-item label="交易所：" prop="exchangeId">
          <el-select v-model="ruleForm.exchangeId" placeholder="请选择交易所" clearable class="selWidth">
            <el-option v-for="item in Joptions" :key="item.id" :label="item.exchangeName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="币种：" prop="currencyId">
          <el-select v-model="ruleForm.currencyId" placeholder="请选择币种" clearable class="selWidth">
            <el-option v-for="item in Boptions" :key="item.id" :label="item.currencyName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


        <!-- <el-form-item label="品种类型：" prop="commodityType">
          <el-input v-model="ruleForm.commodityType"></el-input>
        </el-form-item> -->
        <el-form-item label="品种类型：" prop="commodityType">
          <el-select v-model="ruleForm.commodityType" placeholder="请选择品种" clearable class="selWidth">
            <el-option v-for="item in productData" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="合约乘数：" prop="contractMultiplier">
          <el-input v-model="ruleForm.contractMultiplier"></el-input>
        </el-form-item>

        <!-- 锁仓 -->
        <el-form-item label="锁仓：" prop="lockFlag">
          <el-select v-model="ruleForm.lockFlag" placeholder="请选择锁仓" clearable class="selWidth">
            <el-option v-for="item in lockData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 委托 -->
        <el-form-item label="委托：" prop="orderFlag">
          <el-select v-model="ruleForm.orderFlag" placeholder="请选择委托" clearable class="selWidth">
            <el-option v-for="item in orderData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="价格变动最小点数：" prop="commodityTickSize">
          <el-input v-model="ruleForm.commodityTickSize"></el-input>
        </el-form-item>
        <el-form-item label="每点浮动价值：" prop="floatValue">
          <el-input v-model="ruleForm.floatValue"></el-input>
        </el-form-item>
        <el-form-item label="最小手续费：" prop="minFee">
          <el-input v-model="ruleForm.minFee"></el-input>
        </el-form-item>
        <el-form-item label="最大手续费：" prop="maxFee">
          <el-input v-model="ruleForm.maxFee"></el-input>
        </el-form-item>
        <el-form-item label="交易时间：" prop="tradeTime" class="tradeTime">
          <div class="time" v-for="(item, index) in ruleForm.tradeTime" :key="index">
            <el-time-picker style="width: 180px;" v-model="item.beginTime" :value-format="'HH:mm:ss'" :picker-options="{
              selectableRange: '00:00:00 - 23:59:59'
            }" placeholder="开始时间">
            </el-time-picker>
            <el-time-picker class="mr" style="width: 180px;" v-model="item.endTime" :value-format="'HH:mm:ss'"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }" placeholder="结束时间">
            </el-time-picker>
            <el-button class="mr" size="mini" type="danger" @click="delTradeTime(index)">删除
            </el-button>
            <el-button v-if="index == 0" class="mr" size="mini" type="success" @click="addTradeTime()">添加
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="状态：">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">关闭</el-radio>
            <el-radio :label="3">锁定</el-radio>
            <el-radio :label="4">所有</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  exchangeGetOption, // 交易所全列表
  currencyGetOption, // 币种全列表
  exchangecommodityList,
  exchangecommoditySave,
  exchangecommodityInfo,
  exchangecommodityUpdate,
  exchangecommodityDelete,
  exchangecommodityExport,

  getDictData
} from '@/api/transaction'
export default {
  name: 'contractBreed',
  data() {
    return {
      labelPosition: 'right',
      Boptions: [],
      Joptions: [],
      from: {
        commodityName: '',
        commodityNo: '',
        currencyId: '',
        exchangeId: '',
        status: 1,
        page: 1,
        limit: 15,
      },
      loading: false,
      tableData: {
        data: [],
        total: 0
      },
      selection: [],
      dialogVisible: false,
      ruleForm: {
        id: '',

        commodityName: '',
        commodityNo: '',
        currencyId: '',
        exchangeId: '',
        commodityType: '',
        contractMultiplier: '',
        commodityTickSize: '',
        floatValue: '',
        maxFee: '',
        minFee: '',
        tradeTime: [{
          beginTime: '',
          endTime: ''
        }],
        status: 1,
        remark: '',
        // 新增，
        // 锁仓，1可、2不可
        // 委托，1可、2不可
        lockFlag: '',
        orderFlag: ''
      },
      rules: {
        commodityName: [{
          required: true,
          message: '请填写品种名称',
          trigger: 'blur'
        }],
        commodityNo: [{
          required: true,
          message: '请填写品种编号',
          trigger: 'blur'
        }],
        exchangeId: [{
          required: true,
          message: '请选择交易所',
          trigger: 'change'
        }],
        currencyId: [{
          required: true,
          message: '请选择币种',
          trigger: 'change'
        }],
        commodityType: [{
          required: true,
          message: '请选择品种类型',
          trigger: 'change'
        }],
        contractMultiplier: [{
          required: true,
          message: '请填写合约乘',
          trigger: 'blur'
        }],
        commodityTickSize: [{
          required: true,
          message: '请填写价格变动最小点数',
          trigger: 'blur'
        }],
        floatValue: [{
          required: true,
          message: '请填写每点浮动价值',
          trigger: 'blur'
        }],
        maxFee: [{
          required: true,
          message: '请填写最大手续费',
          trigger: 'blur'
        }],
        minFee: [{
          required: true,
          message: '请填写最小手续费',
          trigger: 'blur'
        }],
        lockFlag: [{
          required: true,
          message: '请选择锁仓',
          trigger: 'change'
        }],
        orderFlag: [{
          required: true,
          message: '请选择委托',
          trigger: 'change'
        }],


      },

      lockData: [],
      orderData: [],
      productData: []
    }
  },
  mounted() {
    exchangeGetOption().then(res => {
      console.log('交易所全列表', res)
      this.Joptions = res
    }).catch(err => {
    })
    currencyGetOption().then(res => {
      console.log('币种全列表', res)
      this.Boptions = res
    }).catch(err => {
      console.log(err)
    })


    // 字典数据
    // 锁仓
    getDictData('lock_flag').then(res => {
      console.log('lock_flag 锁仓数据', res)
      this.lockData = res
    }).catch(res => {
      console.log(res)
    })
    // 委托
    getDictData('order_flag').then(res => {
      console.log('order_flag 委托数据', res)
      this.orderData = res
    }).catch(res => {
      console.log(res)
    })
    // 品种类型
    getDictData('product_class').then(res => {
      console.log('product_class 品种类型数据', res)
      this.productData = res
    }).catch(res => {
      console.log(res)
    })


    this.getlist()
  },
  methods: {
    addTradeTime() {
      this.ruleForm.tradeTime.push({
        beginTime: '',
        endTime: ''
      })
    },
    delTradeTime(index) {
      if (this.ruleForm.tradeTime.length > 1) {
        this.ruleForm.tradeTime.splice(index, 1)
      } else {
        this.$message.error('不能继续删除')
      }
    },
    search() {
      console.log(this.from)
      this.from.page = 1
      this.from.limit = 15
      this.getlist()
    },
    reset() {
      this.from = {
        commodityName: '',
        commodityNo: '',
        currencyId: '',
        exchangeId: '',
        status: 1,
        page: 1,
        limit: 15,
      }
      this.getlist()
    },
    getlist() {
      this.loading = true
      exchangecommodityList(this.from).then(res => {
        console.log(res)
        this.tableData.data = res.list
        this.tableData.data.forEach(item => {
          item.tradeTime = JSON.parse(item.tradeTime)
        })
        this.tableData.total = res.total
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    add() {
      this.ruleForm = {
        id: '',
        commodityName: '',
        commodityNo: '',
        currencyId: '',
        exchangeId: '',
        commodityType: '',
        contractMultiplier: '',
        commodityTickSize: '',
        floatValue: '',
        maxFee: '',
        minFee: '',
        tradeTime: [{
          beginTime: '',
          endTime: ''
        }],
        status: 1,
        remark: '',
        // 新增，
        // 锁仓，1可、2不可
        // 委托，1可、2不可
        lockFlag: '2',
        orderFlag: '1'
      }


      this.dialogVisible = true
    },
    close() {
      this.ruleForm = {
        id: '',
        commodityName: '',
        commodityNo: '',
        currencyId: '',
        exchangeId: '',
        commodityType: '',
        contractMultiplier: '',
        commodityTickSize: '',
        floatValue: '',
        maxFee: '',
        minFee: '',
        tradeTime: [{
          beginTime: '',
          endTime: ''
        }],
        status: 1,
        remark: '',
      }
      this.dialogVisible = false
    },
    isEmptyObject(obj) {
      return Object.keys(obj).length === 0;
    },
    submit() {
      for (let item of this.ruleForm.tradeTime) {
        if (item.beginTime == '' || item.endTime == '') {
          return this.$message.error('交易时间请填写完整');
        }
      }
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            console.log('编辑', this.ruleForm)
            let data = {
              id: this.ruleForm.id,
              commodityName: this.ruleForm.commodityName,
              commodityNo: this.ruleForm.commodityNo,
              currencyId: this.ruleForm.currencyId,
              exchangeId: this.ruleForm.exchangeId,
              commodityType: this.ruleForm.commodityType,
              contractMultiplier: this.ruleForm.contractMultiplier,
              commodityTickSize: this.ruleForm.commodityTickSize,
              floatValue: this.ruleForm.floatValue,
              maxFee: this.ruleForm.maxFee,
              minFee: this.ruleForm.minFee,
              tradeTime: JSON.stringify(this.ruleForm.tradeTime),
              status: this.ruleForm.status,
              remark: this.ruleForm.remark,
              // 新加的字段
              lockFlag: this.ruleForm.lockFlag,
              orderFlag: this.ruleForm.orderFlag
            }
            exchangecommodityUpdate(data).then(res => {
              console.log(res)
              this.close()
              this.$message.success('编辑成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          } else {
            console.log('新增', this.ruleForm)
            let data = {
              commodityName: this.ruleForm.commodityName,
              commodityNo: this.ruleForm.commodityNo,
              currencyId: this.ruleForm.currencyId,
              exchangeId: this.ruleForm.exchangeId,
              commodityType: this.ruleForm.commodityType,
              contractMultiplier: this.ruleForm.contractMultiplier,
              commodityTickSize: this.ruleForm.commodityTickSize,
              floatValue: this.ruleForm.floatValue,
              maxFee: this.ruleForm.maxFee,
              minFee: this.ruleForm.minFee,
              tradeTime: JSON.stringify(this.ruleForm.tradeTime),
              status: this.ruleForm.status,
              remark: this.ruleForm.remark,

              // 新加的字段
              lockFlag: this.ruleForm.lockFlag,
              orderFlag: this.ruleForm.orderFlag
            }
            exchangecommoditySave(data).then(res => {
              console.log(res)
              this.close()
              this.$message.success('新增成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          }
        } else {
          this.$message.error('请填写完整信息')
        }
      });
    },
    // 选择
    onSelectTab(selection) {
      this.selection = []
      selection.forEach(item => {
        this.selection.push(item.id)
      })
      console.log(this.selection)
    },
    allDel() {
      if (this.selection.length == 0) {
        return this.$message.error('至少选择一项')
      }
      console.log(this.selection)
      this.$confirm('确认删除？')
        .then(_ => {
          exchangecommodityDelete(this.selection).then(res => {
            console.log(res)
            this.$message.success('删除成功')
            this.getlist()
          }).catch(err => {
            console.log(err)
            this.$message.error(err)
          })
        })
        .catch(_ => { });
    },
    exportTable() {
      exchangecommodityExport(this.from).then(res => {
        console.log('导出表格', res)
        window.open(res.filename);
      }).catch(err => {
        console.log(err)
        this.$message.error(err)
      })
    },
    handleEdit(row) {
      console.log('编辑', row)
      console.log('aaaaaa',this.productData)
      console.log('bbbbbbb',this.Boptions)
      exchangecommodityInfo(row.id).then(res => {
        console.log('详情', res)
        this.ruleForm = {
          id: res.id,
          commodityName: res.commodityName,
          commodityNo: res.commodityNo,
          currencyId: res.currencyId,
          exchangeId: res.exchangeId,
          commodityType: JSON.stringify(res.commodityType),
          contractMultiplier: res.contractMultiplier,
          commodityTickSize: res.commodityTickSize,
          floatValue: res.floatValue,
          maxFee: res.maxFee,
          minFee: res.minFee,
          tradeTime: JSON.parse(res.tradeTime),
          status: Number(res.status),
          remark: res.remark,
          lockFlag: JSON.stringify(res.lockFlag),
          orderFlag: JSON.stringify(res.orderFlag)
        }
        this.dialogVisible = true
      }).catch(err => {
        console.log(err)
        this.$message.error(err)
      })
    },
    handleDel(row) {
      this.$confirm('确认删除？')
        .then(_ => {
          console.log('删除', row)
          exchangecommodityDelete([row.id]).then(res => {
            console.log(res)
            this.$message.success('删除成功')
            this.getlist()
          }).catch(err => {
            console.log(err)
            this.$message.error(err)
          })
        })
        .catch(_ => { });
    },
    pageChange(page) {
      this.from.page = page
      this.getlist()
    },
    handleSizeChange(val) {
      this.from.limit = val
      this.getlist()
    }

    // 字典

  }
}
</script>

<style scoped lang="scss">
.btn_bt {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}

.tradeTime {
  .time {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .mr {
      margin-left: 15px;
    }
  }
}
</style>
